<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyShop</title>
</head>
<body>
<div id="app">
<form action="" name="searchTop" method="get">
<div>
    <input v-model="keyword" type="text">
    <input type="submit" @click.prevent="searchKey">
</div>
</form>

<div>

    <div v-for="result in results">
        <table border="1">
            <tr>
                <td><img :src="result.img"></td>
                <td><em>¥<b>{{result.price}}</b></em></td>
                <td><p>
                    <a v-html="result.title"></a>
                </p></td>

            </tr>

        </table>

    </div>
</div>

</div>


<!--前端使用vue-->
<script th:src="@{js/vue.js}"></script>
<script th:src="@{js/axios.min.js}"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            keyword: '',  //搜索的关键字
            results: []  //搜索的结果
        },
        methods: {
            searchKey:function(){
                let _this = this;
                let keyword = this.keyword;
                console.log(keyword);
                //对接后端的接口
                axios.get('searchHighlight/'+keyword+"/1/10").then(response=>{
                    console.log(response.data);
                    _this.results = response.data;//绑定数据
                })
            }
        }
    })
</script>
</body>
</html>